<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var xhr=new XMLHttpRequest;
			xhr.open("GET","https://www.easy-mock.com/mock/5aa77cbf2b0894377fc76642/QQmusic_b")
			xhr.send()
			xhr.addEventListener("readystatechange",function(){
				if(xhr.status==200&&xhr.readyState==4){
//					console.log(xhr.response)
					add(JSON.parse(xhr.response))
				}
			})
			function add(res){
				var ul=document.createElement("ul");
				var TopList=res.data.topList;
				var handle=function(res){
					var t="";
					res.forEach(function(el){
						t+=el
					})
					return t
				}
				TopList.forEach(function(el){
					var li=document.createElement("li");
					//console.log(el)
					//涉及循環，統稱處理數據，定義一個函數進行
					var template=`<img src="${el.picUrl}"/>
					${handle(res)}
					`
					li.innerHTML=template;
					ul.appendChild(li)
				})
				document.body.appendChild(ul)
			}
		</script>
	</body>
</html>
